<form name="form">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a href="" ui-sref="^.list" class="btn btn-xs btn-default"><i class="fa fa-arrow-left"></i></a>
      <span ng-show="!ctrl.page.id" translate>Add a new page</span>
      <span ng-show="ctrl.page.id" translate>Edit page</span>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6">
          <formly-form model="ctrl.page" fields="ctrl.formFields" options="ctrl.formOptions"></formly-form>

          <ui-codemirror ui-codemirror-opts="ctrl.editorOptions" ng-model="ctrl.page.content"></ui-codemirror>

          <br/>
        </div>

        <div class="col-md-6">
          <div btf-markdown="ctrl.page.content"></div>
        </div>
      </div>
    </div>
    <div class="panel-footer">
      <button type="submit" class="btn btn-primary btn-success" ng-click="ctrl.submit()" ng-disabled="form.$invalid">
        Submit
      </button>
      <button type="button" class="btn btn-default" ng-click="ctrl.formOptions.resetModel()">Reset</button>
    </div>
  </div>
</form>

<style>
  .CodeMirror {
    border: 1px solid #eee;
    height: auto;
  }

  .CodeMirror-scroll {
    overflow-y: hidden;
    overflow-x: auto;
  }
</style>
